<template>
	<view class="cars">
		<view class="goods" v-for="item in goods" :key="item.id">
			<view class="radios">
				<checkbox-group @change="getGoods($event,item)" ref="checkBox">
					<checkbox :value="item.id" checked v-if="item.checked==true"/>
					<checkbox :value="item.id" v-else/>
				</checkbox-group>
			</view>
			<view class="imgs">
				<img src="../../static/imgs/msd.jpg" alt="">
			</view>
			<view class="titles">
				<h5>{{item.name}}</h5>
				<text>{{item.introduce}}</text>
				<view class="count">
					<h4 style="color: #E43D33;">￥{{item.prices}}</h4>
				</view>
			</view>
		</view>
		<view class="other">
			<text>已经到底啦~</text>
		</view>
		<view v-show="false">{{checkIds}}</view>
		<view class="btns">
			<checkbox-group @change="getAllGoods($event)" style="display: flex;align-items: center;">
				<text style="margin-right: 10px;">全选</text>
				<checkbox :checked="checked"/>
			</checkbox-group>
			<view class="buy">
				<view class="total">
					<text>共计</text>
					<text style="color: #E43D33;font-size: 20px;">￥{{money}}</text>
				</view>
				<view class="btn" @click="toBuy">
					<text>结算</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				goods:[
					{
						id:"1",
						name:'HPV九价疫苗',
						introduce:'接种前三小时不可进食,接种前三小时不可进食,接种前三小时不可进食',
						prices:3999,
						checked:true,
					},
					{
						id:"2",
						name:'HPV九价疫苗',
						introduce:'接种前三小时不可进食',
						prices:3999,
						checked:false,
					},
					{
						id:"3",
						name:'HPV九价疫苗',
						introduce:'接种前三小时不可进食',
						prices:3999,
						checked:false,
					}
				]
			}
		},
		computed:{
			money:function(){
				let sum=0
				this.goods.forEach((item)=>{
					if(item.checked){
						sum=sum+item.prices
					}
				})
				return sum
			},
			checkIds:function(){
				let sum=""
				this.goods.forEach((item)=>{
					if(item.checked){
						if(sum==""){
							sum=item.id
						}else{
							sum+=","+item.id
						}
					}
				})
				let zu=String(sum).split(',')
				if(zu.length==this.goods.length){
					this.checked=true
				}else{
					this.checked=false
				}
				return sum
			}
		},
		methods: {
			toBuy:function(){
				let ids=this.checkIds
				uni.navigateTo({
					url:'../../subpages/toBuy/toBuy?ids='+ids
				})
			},
			getGoods(e,current){
				// let str=parseInt(e.detail.value[0])
				this.goods.forEach((item)=>{
					if(current.id==item.id){
						item.checked=!item.checked
					}
				})
				// if(str==NaN){
				// 	// 结算减去当前价格
				// 	// this.money=this.money-item[e.detail.value].prices
					
				// 	Array.prototype.remove = function(str) {
				// 		var index = this.buyIds.indexOf(val);
				// 		if (index > -1) {
				// 			this.splice(index, 1);
				// 		}
				// 	}
						
				// }else{
				// 	this.buyIds.push(str)
				// 	// 结算加上当前价格
				// }
				// // this.money=this.money+item.prices
				// console.log(JSON.stringify(this.buyIds))
			},
			
			getAllGoods:function(e){
				// if(e.detail.value){
					
				// }
				this.checked=!this.checked
				this.goods.forEach((item)=>{
					item.checked=this.checked
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.cars{
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom,rgba(235,220,225,0.5),rgba(224,232,235,0.5)) ;
	}
	.other{
		height: 90px;
		text-align: center;
		margin-top: 15px;
		color: #aaa;
	}
	.goods{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10px 0;
		border-radius: 10px;
		margin: 0 10px 10px 10px;
		.imgs{
			img{
				width: 80px;
				height: 80px;
			}
		}
		.titles{
			padding: 0 10px;
			width: 50%;
			text{
				display: -webkit-box;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.count{
				display: flex;
				justify-content: space-between;
				.input{
					width: 50%;
					text-align: center;
				}
			}
		}
	}
	.btns{
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 50px;
		height: 45px;
		width: 90%;
		padding: 0 20px;
		background-color: #FFFFFF;
		align-items: center;
		.buy{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn{
				background:linear-gradient(to right,rgb(255, 123, 0),rgb(255,68,0)) ;
				padding: 10px 30px;
				border-radius: 20px;
				margin-left: 10px;
				color: #fff;
			}
		}
	}
</style>
